//显示动画
import 'package:flutter/material.dart';

class ExplicitAnimPage extends StatefulWidget {
  const ExplicitAnimPage({super.key, required this.title});

  final String title;

  @override
  State<ExplicitAnimPage> createState() => _ExplicitAnimPageState();
}

class _ExplicitAnimPageState extends State<ExplicitAnimPage> with SingleTickerProviderStateMixin {
  int _counter = 0;
  bool isOpen = false;
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _animation = Tween<double>(begin: 50, end: 300).animate(CurvedAnimation(parent: _controller, curve: Curves.bounceOut));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _incrementCounter() {
    if(_controller.isAnimating) {
      _controller.stop();
    }else{
      _controller.repeat(reverse: true);
    }
    setState(() {
      _counter++;
      isOpen = !isOpen;

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          spacing: 10,
          children: <Widget>[
            const Text(
              '显示动画（Explicit Animations）是一种在 Flutter 中手动控制的动画形式，使用 Animation 和 AnimationController 来实现。相比隐式动画，显示动画提供了更大的灵活性，使你能够更精确地控制动画的进程、效果和交互。',
            ),
            AnimatedBuilder(
                animation: _animation,
                builder: (context, child) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.blue,
                    height: _animation.value,
                    width: _animation.value,
                    child: Text("显示动画", style: TextStyle(color: Colors.white)),
                  );
                })
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
